<template>
   <!-- 表格 -->
    <div class="table">
        <el-table :data="list" style="width: 100%; height: 600px;" >
            <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop" :width="item.width? item.with : 150" />
            <el-table-column label="操作" min-width="150" fixed="right">
                <template #default>
                    <el-button size="small">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column> 
        </el-table>
        <el-pagination @current-change="chagePage" layout="prev, pager, next" :total="200"  />
    </div>

</template>


<script setup>

import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

const {proxy} =getCurrentInstance()

const tableLabel = reactive([
    {
        prop:'name',
        label:'姓名'
    },
    {
        prop:'sex',
        label:'性别'
    },
    {
        prop:'age',
        label:'年龄'
    },
    {
        prop:'birth',
        label:'出生日期',
        width:200
    },
    {
        prop:'addr',
        label:'地址',
        width:200
    },
])


// 用户列表数据
let list= ref([])
// console.log(list.value);

let config = reactive({
    total:0,
    page:1,
    name:'',
})
const chagePage =(page)=>{
    config.page=page
    getUserData(config)
}


// 用户列表数据方法
const getUserData=async(config)=>{
    let res= await proxy.$api.getUserData(config)
    console.log(res);
    config.total = 200
    list.value=res.list.map((item)=>{
        item.sex = item.sex === 0 ? '女':'男'
        return item
    })
    // console.log(list.value);
    
    // console.log(res);
    
}
onMounted(()=>{
    getUserData()
})

</script>



<style lang="less"></style>